<template>
  <div>
	  <div>
      <div style="margin:2% 0;display: inline-block;">
<!--        <span>名称：</span>-->
<!--        <el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入名称" v-model="name"></el-input>-->
      </div>
	  </div>
	  <el-table
		v-loading="tableDataLoading"
	    :data="tableData.content"
		row-key="id">
      <el-table-column prop="name" label="名称">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="payMoney" label="充值(%)">
        <template slot-scope="scope">
          <span>{{scope.row.payMoney}}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="payVip" label="开通vip(%)">
        <template slot-scope="scope">
          <span>{{scope.row.payVip}}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="agent" label="代理(%)">
        <template slot-scope="scope">
          <span>{{scope.row.agent}}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="play" label="陪玩(%)">
        <template slot-scope="scope">
          <span>{{scope.row.play}}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="whereas" label="代练(%)">
        <template slot-scope="scope">
          <span>{{scope.row.whereas}}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="registered" label="注册(元)">
        <template slot-scope="scope">
          <span>{{scope.row.registered}}元</span>
        </template>
      </el-table-column>
      <el-table-column prop="game" label="有效好友(元)">
        <template slot-scope="scope">
          <span>{{scope.row.game}}元</span>
        </template>
      </el-table-column>
	    <el-table-column
	      label="操作"
        width="80px"
        align="center"
        fixed="right">
	      <template slot-scope="scope">
          <el-button style="margin-bottom: 5px" size="mini" type="primary" @click="toDetail(scope.row)">修改</el-button>
          <br>
<!--	        <el-button-->
<!--	          size="mini"-->
<!--	          type="danger"-->
<!--	          @click="deletes(scope.row)">删除-->
<!--	        </el-button>-->
	      </template>
	    </el-table-column>
	  </el-table>
	  <div style="text-align: center;margin-top: 10px;">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :page-sizes="[5, 10, 15, 20]"
	      :page-size="size"
	      :current-page="page"
	      layout="total,sizes, prev, pager, next"
	      :total="tableData.totalElements">
	    </el-pagination>
	  </div>
    <el-dialog title="修改" :visible.sync="dialogFormVisible" width="500px" >
      <el-form :model="form" label-width="100px">
        <el-form-item label="充值">
          <el-col :span="16">
            <el-input v-model="form.payMoney" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="6" :offset="1">
            %
          </el-col>
        </el-form-item>
        <el-form-item label="开通vip">
          <el-col :span="16">
          <el-input v-model="form.payVip" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="6" :offset="1">
            %
          </el-col>
        </el-form-item>
        <el-form-item label="代理">
          <el-col :span="16">
          <el-input v-model="form.agent" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="6" :offset="1">
            %
          </el-col>
        </el-form-item>
        <el-form-item label="陪玩">
          <el-col :span="16">
          <el-input v-model="form.play" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="6" :offset="1">
            %
          </el-col>
        </el-form-item>
        <el-form-item label="代练">
          <el-col :span="16">
          <el-input v-model="form.whereas" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="6" :offset="1">
            %
          </el-col>
        </el-form-item>
        <el-form-item label="注册">
          <el-col :span="16">
          <el-input v-model="form.registered" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="6" :offset="1">
            元
          </el-col>
        </el-form-item>
        <el-form-item label="有效好友">
          <el-col :span="16">
          <el-input v-model="form.game" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="6" :offset="1">
            元
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="toSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
	export default {
	    data() {
	      return {
				size:5,
				page:1,
        name: null,
				tableDataLoading:false,
        tableData:{
          content: []
        },
        dialogFormVisible: false,
        form:{}
			}
		},
		methods: {
      // select自动选择
      selectTrigger() {
        this.dataSelect()
      },
      // 查询
      select() {
        this.page = 1
        this.size = 5
        this.dataSelect()
      },
			handleSizeChange (val) {
			  this.size = val
			  this.dataSelect()
			},
			handleCurrentChange (val) {
			  this.page = val
			  this.dataSelect()
			},
      toSave(){
        let _this = this
        this.dialogFormVisible = false
        this.$http({
          url: this.$http.adornUrl2('/commission/update'),
          method: 'post',
          params: this.$http.adornParams({
            ...this.form
          })
        }).then(({status, data}) => {
          if(data.status == 0){
            this.$message({
              message: '修改成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.dataSelect()
              }
            })
          }else{
            this.$message({
              message: data.msg,
              duration: 1500
            })
          }

        })
      },
      toDetail(row){
        this.form = {
          id: row.id,
          payMoney: row.payMoney,
          payVip: row.payVip,
          agent: row.agent,
          play: row.play,
          whereas: row.whereas,
          registered: row.registered,
          game: row.game,
        }
        this.dialogFormVisible = true
        // this.$router.push({path: '/whereasDetail', query: {id: row.id}})
      },
			// 删除分类
			deletes(row){
				this.$confirm(`确定删除此条记录?`, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
          this.$http({
            url: this.$http.adornUrl2('/commission/delete'),
            method: 'get',
            params: this.$http.adornParams({
              'id':row.id
            })
          }).then(({status, data}) => {
            if(data.status == 0){
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            }else{
              this.$message({
                message: data.msg,
                duration: 1500
              })
            }

          })
        }).catch(() => {})
			},
      // 获取数据
      dataSelect () {
        let page = this.page - 1
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl2('/commission/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page':page,
            'size':this.size,
            // 'name':this.name,
            // 'userId':this.userId,
            // 'area':this.area,
          })
        }).then(({data}) => {
          this.tableDataLoading = false
          // console.log(data)
          this.tableData = data.data || {content: []};
        })
      }
		},
    mounted() {
      this.dataSelect()
    }
	  };
</script>

<style>

</style>
